<!--
 * @Descripttion: 报名信息页面
 * @version: @ 1.0.0
 * @Author: ZJZ
 * @Date: 2021-06-04 11:03:44
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-06-02 09:23:22
-->
<template>
  <div class="app-container">
    <div class="header">
      <div class="bread">
        <img src="@/assets/images/management.png" alt="" />
        <span style="margin-left: 10px">报名信息</span>
      </div>
      <div class="ipt">
        <el-input
          v-model="input"
          placeholder="请输入批次名称/考试名称"
          size="normal"
          clearable
          class="ipt-el"
        ></el-input>
        <el-button type="primary" size="default" @click="search"
          >搜索</el-button
        >
      </div>
      <div class="btn">
        <el-dropdown>
          <el-button class="el-icon-more"></el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="getExl"> 导出 </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <div class="chooise" v-if="selShow">
      <span>场景：</span>
      <el-select
        v-model="value"
        ref="sel"
        clearable
        @visible-change="(v) => visibleChange(v, 'sel', selClick, admClick)"
        class="sel-sence"
        @change="querySceneList"
      >
        <el-option
          v-for="item in options"
          :key="item.sceneId"
          :label="item.name"
          :value="item.sceneId"
        >
        </el-option>
      </el-select>
      <el-button
        type="primary"
        icon="iconfont icon-shaixuan"
        size="default"
        @click="screen"
      >
        高级筛选
      </el-button>
    </div>
    <div class="btnShow" v-else>
      <span style="margin-right: 10px">
        已选中 {{ multipleSelection.length }} 项
      </span>
      <!-- <el-button
        type="primary"
        size="default"
        plain
        @click="change"
        :disabled="disabled"
        v-hasPermi="['register:management:replace']"
      >
        更换负责人
      </el-button> -->
      <!-- <el-button
        type="primary"
        size="default"
        plain
        @click="cancel"
        v-hasPermi="['register:management:cancel']"
      >
        取消报名
      </el-button> -->
      <!-- <el-button
        type="primary"
        size="default"
        plain
        @click="billing"
        :disabled="disabled"
        v-hasPermi="['register:management:invoicing']"
      >
        申请开票
      </el-button> -->
      <el-button
        type="primary"
        size="default"
        plain
        @click="edit"
        :disabled="disabled"
      >
        编辑
      </el-button>
      <el-button type="primary" size="default" plain @click="selectImport">
        导出选中
      </el-button>
      <el-button
        type="primary"
        size="default"
        plain
        @click="printing"
        :disabled="disabled"
        v-hasPermi="['register:management:print']"
      >
        查看并打印
      </el-button>
    </div>
    <div v-if="scenArr !== []" class="scenF">
      <div v-for="(item, index) in scenArr" :key="index" class="scenF-content">
        <div class="scenF-detail" @click="scenSearch(item.sceneId)">
          {{ item.sceneList }}
          <i
            class="el-icon-circle-close"
            @click.stop="scenDel(index)"
            style="margin-left: 10px"
          ></i>
        </div>
      </div>
    </div>
    <el-table
      :data="manageData"
      style="width: 100%; margin-top: 20px"
      ref="multipleTable"
      @selection-change="handleSelectionChange"
      :height="tableHight"
    >
      <template slot="empty" class="emptyBg">
        <img src="@/assets/images/empty.jpg" alt="" />
      </template>
      <el-table-column type="selection"> </el-table-column>
      <el-table-column label="姓名">
        <template slot-scope="scope">
          <span class="mangement" @click="drawer(scope.row)">
            {{ scope.row.personName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="考试批次" prop="batchName"> </el-table-column>
      <el-table-column label="考试名称" prop="examinationName">
      </el-table-column>
      <el-table-column label="身份证号码" prop="idNumber"> </el-table-column>
      <el-table-column label="手机号码" prop="phone"> </el-table-column>
      <el-table-column
        label="公司名称"
        prop="company"
        :show-overflow-tooltip="true"
      >
      </el-table-column>
    </el-table>
    <el-pagination
      prev-text="上一页"
      next-text="下一页"
      background
      :page-size="pageSize"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      layout=" ->,total, sizes,prev, pager, next, jumper "
      :total="total"
    >
    </el-pagination>
    <manage-drawer
      :dialog="dialog"
      :drawerData="drawerData"
      v-if="dialog.dialogShowDrawerEject"
    ></manage-drawer>
    <billing-information :dialog="dialog"></billing-information>
    <!-- 更换负责人 -->
    <el-dialog
      title="更换负责人"
      :visible.sync="dialog.dialogPerCha"
      width="50%"
      @close="perClose"
      custom-class="dialogClass"
      :close-on-click-modal="false"
    >
      <charge-person
        v-if="dialog.dialogPerChaEject"
        ref="chaPer"
      ></charge-person>
      <span slot="footer">
        <el-button @click="dialog.dialogPerCha = false"> 取消 </el-button>
        <el-button type="primary" @click="onChangeChar"> 确定 </el-button>
      </span>
    </el-dialog>
    <manage-screen
      :dialog="dialog"
      v-if="dialog.screenEcejt"
      @sceneArr="sceneArr"
    ></manage-screen>
    <drag-table
      :dialog="dialog"
      v-if="dialog.senceAdminEject"
      ref="dragTable"
    ></drag-table>
    <print
      :dialog="dialog"
      :drawerData="drawerData"
      v-if="dialog.printShowEject"
    ></print>
    <edit-management
      :dialog="dialog"
      :drawerData="drawerData"
      v-if="dialog.editManShowEject"
    ></edit-management>
  </div>
</template>

<script>
import manageDrawer from "./conponents/manageDrawer.vue";
import billingInformation from "./conponents/billingInformation";
import {
  getExaInfo,
  exportByIds,
  exportAll,
  updateList,
  updateManagement,
} from "../../api/registration";
import { queryScene } from "../../api/currency";
import ManageScreen from "./conponents/manageScreen.vue";
import DragTable from "./conponents/management/dragTable.vue";
import Print from "./conponents/management/Print.vue";
// 负责人
import chargePerson from "@/components/chargePerson";
import EditManagement from "./conponents/management/editManagement.vue";
export default {
  components: {
    manageDrawer,
    billingInformation,
    ManageScreen,
    DragTable,
    Print,
    chargePerson,
    EditManagement,
  },
  data() {
    return {
      drawerData: {},
      tableHight: window.innerHeight - 330,
      scenArr: [],
      defaultParams: {
        label: "name",
        value: "sceneId",
        children: "sceneDataList",
        expandTrigger: "hover",
        checkStrictly: true,
      },
      total: 0,
      pageSize: 10,
      pageNum: 1,
      input: "",
      value: "",
      disabled: true,
      selShow: true,
      chioosForm: {
        responsible: "",
      },
      dialog: {
        dialogShowDrawer: false,
        dialogShowDrawerEject: false,
        dialogShowChioos: false,
        dialogShowBilling: false,
        dialogScreenVisible: false,
        senceAdmin: false, //场景管理
        senceAdminEject: false,
        screenEcejt: false,
        printShow: false,
        printShowEject: false,
        dialogPerCha: false,
        dialogPerChaEject: false,
        editManShowEject: false,
        editManShow: false,
      },
      drawerData: {},
      multipleSelection: [],
      manageData: [],
      chioosRules: {
        responsible: [
          { required: true, message: "请选择负责人", trigger: "change" },
        ],
      },
      options: [],
    };
  },
  watch: {
    input(newValue, oldValue) {
      if (newValue == "") {
        this.getInfoData();
      }
    },
  },
  created() {
    this.getInfoData();
    this.getScene();
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        this.tableHight = window.innerHeight - 330;
      })();
    };
  },
  activated() {
    this.tableHight = window.innerHeight - 330;
  },
  methods: {
    /** 导出按钮操作 */
    getExl() {
      this.$confirm("是否确认导出所有数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return exportAll();
        })
        .then((response) => {
          this.download(response.msg);
        });
    },
    // 导出选中
    selectImport() {
      let ids = [];
      this.multipleSelection.forEach((item) => {
        ids.push(item.id);
      });
      exportByIds(ids).then((res) => {
        this.download(res.msg);
      });
    },
    // 关闭更换负责人
    perClose() {
      this.charge = "";
      this.dialog.dialogPerChaEject = false;
    },
    // 确定更换
    onChangeChar() {
      if (this.charge == "") return this.$message.error("请选择负责人");
      changeDirector({
        id: this.chargeId,
        userId: this.charge,
      }).then((res) => {
        this.$message.success(res.msg);
        this.dialog.dialogPerCha = false;
        this.getList();
      });
    },
    // 更换负责人
    changeCharge() {
      this.dialog.dialogPerChaEject = true;
      this.$nextTick(function () {
        this.dialog.dialogPerCha = true;
      });
    },
    // 打开打印
    printing() {
      this.drawerData = this.multipleSelection[0];
      this.dialog.printShowEject = true;
      this.$nextTick(function () {
        this.dialog.printShow = true;
      });
    },
    // 点击临时搜索
    scenSearch(id) {
      this.getInfoData(id);
    },
    // 删除临时搜索
    scenDel(i) {
      this.scenArr.splice(i, 1);
      if (this.scenArr.length == 0) {
        this.getInfoData();
      }
    },
    // 获取数组
    sceneArr(data) {
      this.scenArr.push(data);
    },
    querySceneList() {
      this.getInfoData(this.value);
    },
    //管理
    admClick() {
      this.dialog.senceAdminEject = true;
      this.$nextTick(function () {
        this.dialog.senceAdmin = true;
      });
    },
    //新建场景
    selClick() {
      this.screen();
    },
    // 场景下拉框按钮
    visibleChange(visible, refName, onClick, onClick2) {
      if (visible) {
        const ref = this.$refs[refName];
        let popper = ref.$refs.popper;
        if (popper.$el) popper = popper.$el;
        if (
          !Array.from(popper.children).some(
            (v) => v.className === "el-cascader-menu__list"
          )
        ) {
          const el = document.createElement("ul");
          el.className = "el-cascader-menu__list";
          el.style =
            "border-top: solid 1px #E4E7ED; padding:0; color: #606266;";
          el.innerHTML = `<li class="el-cascader-node" >
                            <span class="el-cascader-node__label" style='color:#1267FA'>新建场景</span>
                            </li>
                        `;
          const el2 = document.createElement("ul");
          el2.className = "el-cascader-menu__list";
          el2.innerHTML = `<li class="el-cascader-node" >
                            <span class="el-cascader-node__label" style='color:#1267FA'>管理</span>
                            </li>
                        `;
          popper.appendChild(el);
          popper.appendChild(el2);
          el2.onclick = () => {
            onClick2 && onClick2();
            if (ref.toggleDropDownVisible) {
              ref.toggleDropDownVisible(false);
            } else {
              ref.visible = false;
            }
          };
          el.onclick = () => {
            // 底部按钮的点击事件 点击后想触发的逻辑也可以直接写在这
            onClick && onClick();
            // 以下代码实现点击后弹层隐藏 不需要可以删掉
            if (ref.toggleDropDownVisible) {
              ref.toggleDropDownVisible(false);
            } else {
              ref.visible = false;
            }
          };
        }
      }
    },
    search() {
      this.getInfoData();
    },
    // 请求场景
    getScene() {
      queryScene({
        type: 3,
      }).then((res) => {
        if (res.default !== null) {
          res.scenes.unshift(res.default);
          this.options = res.scenes;
        } else {
          this.options = res.scenes;
        }
      });
    },
    screen() {
      this.dialog.screenEcejt = true;
      this.$nextTick(function () {
        this.dialog.dialogScreenVisible = true;
      });
    },
    getInfoData(val) {
      getExaInfo({
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        sceneId: val,
        identification: this.input,
      }).then((res) => {
        this.manageData = res.rows;
        this.total = res.total;
      });
    },
    drawer(row) {
      this.dialog.dialogShowDrawerEject = true;
      this.drawerData = row;
      this.$nextTick(function () {
        this.dialog.dialogShowDrawer = true;
      });
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getInfoData();
    },
    handleSelectionChange(val) {
      this.drawerData = [];
      this.multipleSelection = val;
      this.selShow = false;
      if (val.length == 0) {
        this.selShow = true;
      }
      if (val.length > 0) {
        this.drawerData = val[0];
      }
      if (val.length > 1) {
        this.disabled = true;
      } else {
        this.disabled = false;
      }
    },
    change() {
      this.dialog.dialogShowChioos = true;
    },
    edit() {
      this.dialog.editManShowEject = true;
      this.$nextTick(() => {
        this.dialog.editManShow = true;
      });
    },
    cancel() {},
    billing() {
      this.dialog.dialogShowBilling = true;
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 100%;
  height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #ececec;
  .bread {
    // margin-top: 20px;
    margin-left: 5px;
    height: 30px;
    display: flex;
    vertical-align: middle;
    line-height: 30px;
    p {
      margin-left: 10px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #2b2b2b;
    }
  }

  .ipt {
    // margin: 16px auto 0;
    width: 340px;
    transform: translateX(-20%);
    /deep/ .el-input__inner {
      border-radius: 4px 0 0 4px;
    }
    .el-button--primary {
      border-radius: 0 4px 4px 0;
    }
  }
}
.chooise {
  margin-top: 20px;
  .sel {
    margin: 0 14px;
  }
  .el-button {
    font-size: 14px;
    /deep/ span {
      margin-left: 5px;
    }
  }
}
.mangement {
  color: #1267fa;
}
.btnShow {
  margin-top: 20px;
}
// /deep/ .el-dialog__body {
//   padding: 0;
// }
/deep/ .el-dialog__wrapper {
  left: 120px;
}
.el-pagination {
  margin-top: 24px;
  /deep/ .el-pagination__total {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 25px;
  }
  /deep/ .btn-prev {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-input__inner {
    // width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .more {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    .el-input__inner {
      width: 40px;
      height: 40px;
    }
  }
}
.ipt-el {
  width: 240px;
}
.sel-sence {
  margin-right: 10px;
}
.scenF {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  .scenF-content {
    display: flex;
    margin-left: 10px;
    margin-top: 10px;
    .scenF-detail {
      height: 36px;
      line-height: 36px;
      padding-left: 20px;
      padding-right: 20px;
      border: 1px solid #9aa1af;
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      .el-icon-circle-close {
        transform: translateY(3px);
      }
    }
  }
}
</style>